<template>
  <div id="CircularDiagram" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: ['chartData'],
  data() {
    return {
      chart: null,
      className: 'chart',
      width: '100%',
      height: '400px',
      autoResize: true
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (!this.chart) {
          return
        }
        this.setOptions(val)
      },
      deep: true, // 深度监听
      immediate: true // 初次监听即执行
    }
  },
  created() {
    setTimeout(() => {
      this.setOptions(this.chartData)
    }, 1000)
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      if (JSON.stringify(this.chartData) !== '{}') {
        this.setOptions(this.chartData)
      }
    },
    setOptions(data) {
      this.chart.setOption({
        title: {
          text: '库存分布图'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '17%',
          orient: 'vertical',
          x: 'right',
          // left: 'center',
          // right: '8%'
        },
        series: [{
          name: '仓库情况',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          smooth: true,
          type: 'pie',
          color: ['#6EB9FF', '#7ADEFF', '#FFD770', '#FF7F00', '#91cc75', '#DF2020', '#FFD700'],
          labelLine: {
            show: false
          },
          data,
          animationDuration: 2000,
          animationEasing: 'cubicInOut'
        }]
      })
    }
  }
}
</script>

<style>
#CircularDiagram {
  height: 221px;
  background: rgba(255, 255, 255, 1);
}
canvas {
  top: 15px;
}
</style>
